<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .total {
      overflow: hidden;
      margin: 0 auto;
      width: 384px;
      height: 256px;
    }

    .total #banner {
      width: 500%;
      height: 256px;
    }

    .total #banner img {
      float: left;
      width: 384px;
      height: 256px;
    }
  </style>
</head>

<body>
  <div class="total">
    <ul id="banner">
      <li>
        <img src="../images/img1.jpg" alt="">
      </li>
      <li>
        <img src="../images/img2.jpg" alt="">
      </li>
      <li>
        <img src="../images/img3.jpg" alt="">
      </li>
      <li>
        <img src="../images/img4.jpg" alt="">
      </li>
      <li>
        <img src="../images/img1.jpg" alt="">
      </li>
    </ul>
  </div>
  <script>
    let curindex = 0
    let maxLen = document.querySelector('#banner').children.length - 1
    var banner = document.querySelector('#banner')
    let timer = null
    let box = document.querySelector('.total')
    let width = box.offsetWidth
    timer = setInterval(changeAuto, 2000);
    function changeAuto () {
      if (curindex < maxLen) {
        curindex++
        getNext()
      } else {
        curindex = 0
        getReset()
        curindex++
        banner.style.marginLeft = '-' + width * curindex + 'px'
      }
    }
    function getNext () {
      banner.style.marginLeft = '-' + width * curindex + 'px'
      banner.style.transition = 0.3 + 's'
    }
    function getReset () {
      banner.style.marginLeft = '-' + width * curindex + 'px'
      banner.style.transition = 0 + 's'
    }
  </script>
</body>

</html>